* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #003027;
}

li {
    list-style: none;
}

i {
    font-style: normal;
}

// 头部模块
header {
    display: flex;
    height: 1.7917rem;
    background: url(../images/title_bg.png);
    background-size: 100% 100%;

    >div {
        flex: 1;
    }

    h1 {
        display: flex;
        justify-content: center;
        flex: 1;
        line-height: 1.5rem;
        color: #fff;
        font-size: 0.6rem;
        margin-right: 2.6rem;
    }

    .weatherbox {
        margin-left: 0.8rem;
        font-size: 0.4rem;
        color: #c8c8c8;
        line-height: 1rem;
    }

    .timebox {
        display: flex;
        justify-content: flex-end;
        padding-right: 1rem;

        span {
            font-size: 0.55rem;
            color: #f9f9f9;
            line-height: 1rem;
        }

        i {
            font-size: 0.5rem;
            color: #c8c8c8;
            line-height: 1rem;
        }
    }
}

// 主体内容区域
.maincontent {
    padding: 0 0.8rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .panel {
        margin-bottom: 0.5rem;
        width: 15.1083rem;
        height: 7.3208rem;
        background: url(../images/enter_trend_bg.png);
        background-size: 100% 100%;
    }

}

// 借阅排行区域
.lendingRanking {
    h4 {
        color: #fff;
        font-size: .3833rem;
        line-height: 0.7rem;
        margin-left: 0.4rem;
    }

    ul {
        color: #fff;
        padding: 0.2rem 0.1rem 0.1rem 0.4rem;

        // 所以小li的公共样式
        li {
            display: flex;
            align-items: center;
            position: relative;
            width: 13.9667rem;
            height: .5125rem;
            background: url(../images/top_bg.png);
            background-size: 100% 100%;
            margin-bottom: 0.3rem;

            // 小li下面的第一个span 序号
            >span:nth-child(1) {
                display: inline-block;
                width: .5128rem;
                text-align: center;
                font-size: .26rem;
                color: #02D7B1;
            }

            // 小li下面的第二个span 姓名
            >span:nth-child(2) {
                font-size: .2287rem;
                margin-left: .5128rem;
            }

            // 小li下面的第三个span 院系
            >span:nth-child(3) {
                font-size: .2287rem;
                margin-left: 2rem;
            }

            // 小li下面的第四个span 借阅量
            >span:nth-child(4) {
                font-size: .2287rem;
                margin-left: 2rem;
            }

            // 小li下面的第五个span 入馆量
            >span:nth-child(5) {
                font-size: .2287rem;
                margin-left: 2rem;
            }

            &::before {
                position: absolute;
                right: 0;
                bottom: 0;
                content: '';
                width: .1458rem;
                height: .0583rem;
                background: url('../images/top_tip.png');
                background-size: 100% 100%;
            }

        }

        // 第一个li
        li:nth-child(1) {
            position: relative;
            width: 13.9667rem;
            height: .5125rem;
            background: url('../images/top1_bg.png');
            background-size: 100% 100%;
            margin-bottom: 0.2rem;

            &::after {
                position: absolute;
                left: -0.4rem;
                top: 0.15rem;
                content: '';
                width: .25rem;
                height: .25rem;
                background: url(../images/top1.png);
                background-size: 100% 100%;
            }

            &::before {
                position: absolute;
                right: 0;
                bottom: 0;
                content: '';
                width: .1458rem;
                height: .0583rem;
                background: url('../images/top1_tip.png');
                background-size: 100% 100%;
            }

            >span:nth-child(1) {
                display: inline-block;
                width: .5128rem;
                text-align: center;
                font-size: .26rem;
                color: #FFD200;
            }
        }

        // 第二个li
        li:nth-child(2) {
            position: relative;
            width: 13.9667rem;
            height: .5125rem;
            background: url('../images/top2_bg.png');
            background-size: 100% 100%;
            margin-bottom: 0.2rem;

            >span:nth-child(1) {
                display: inline-block;
                width: .5128rem;
                text-align: center;
                font-size: .26rem;
                color: #25EAFF;
            }

            &::after {
                position: absolute;
                left: -0.4rem;
                top: 0.15rem;
                content: '';
                width: .25rem;
                height: .25rem;
                background: url(../images/top2.png);
                background-size: 100% 100%;
            }

            &::before {
                position: absolute;
                right: 0;
                bottom: 0;
                content: '';
                width: .1458rem;
                height: .0583rem;
                background: url('../images/top2_tip.png');
                background-size: 100% 100%;
            }
        }

        // 第三个li
        li:nth-child(3) {
            position: relative;
            width: 13.9667rem;
            height: .5125rem;
            background: url('../images/top3_bg.png');
            background-size: 100% 100%;
            margin-bottom: 0.2rem;

            >span:nth-child(1) {
                display: inline-block;
                width: .5128rem;
                text-align: center;
                font-size: .26rem;
                color: #2EFF7F;
            }

            &::after {
                position: absolute;
                left: -0.4rem;
                top: 0.15rem;
                content: '';
                width: .25rem;
                height: .25rem;
                background: url(../images/top3.png);
                background-size: 100% 100%;
            }

            &::before {
                position: absolute;
                right: 0;
                bottom: 0;
                content: '';
                width: .1458rem;
                height: .0583rem;
                background: url('../images/top3_tip.png');
                background-size: 100% 100%;
            }
        }
    }
}

// 入馆趋势排行头部
.attendanceTrend {
    display: flex;
    justify-content: space-between;
    color: #fff;
    line-height: 0.7rem;

    h3 {
        font-size: .3833rem;
        margin-left: 0.4rem;
    }

    i {
        font-size: .2rem;
        margin-right: 0.2rem;
    }
}

// 入馆趋势排行图表
.attendanceTrendBar {
    width: 14.1806rem;
    height: 2.9875rem;

    margin-top: 0.4rem;
    margin-left: 0.5rem;

    .attendanceTrendBarBox {
        display: flex;
        height: 100%;

        ul:nth-child(1) {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
            height: 100%;
            font-size: .2rem;
            color: #fff;
            padding-bottom: 0.3rem;
        }

        ul:nth-child(2) {
            width: 13.4556rem;
            display: flex;
            justify-content: space-around;

            margin-top: 0.1rem;

            >li {
                display: flex;
                flex-direction: column;
                align-items: center;

                >span:nth-child(1) {

                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                    width: .8057rem;
                    height: 2.5956rem;
                    background: url(../images/person_data_bg.png);
                    background-size: 100% 100%;

                    >i {
                        position: relative;
                        display: inline-block;
                        width: .1993rem;
                        height: 1.0465rem;
                        // height: 100%;
                        background: linear-gradient(to bottom,
                                #C7FF9B,
                                #65FFB5 50%,
                                #2EF2FF 100%,
                            );
                        border-radius: 1px;
                        margin-bottom: 0.3rem;

                        >img {
                            position: absolute;
                            top: -0.6rem;
                            left: -0.15rem;
                            width: .486rem;
                            height: .356rem;
                        }
                    }


                }

                >span:nth-child(2) {
                    font-size: .195rem;
                    color: #fff;
                }
            }
        }
    }
}

// 入馆趋势右下角
.attendanceTrendBottom {
    // margin-top: 0.4rem;
    margin-left: 0.5rem;
    display: flex;

    .pavilionNum {
        li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 0.18rem;
            padding: 0 0.3rem 0 0.2rem;
            position: relative;
            width: 6.6792rem;
            height: .575rem;
            line-height: .575rem;
            background: url(../images/person_time_bg1.png);
            background-size: 100% 100%;

            span:nth-child(1) {
                font-size: .2062rem;
                color: #fff;
            }

            span:nth-child(2) {
                height: 100%;
                display: flex;
                // align-items: center;
                color: #3EFF97;

                i {
                    font-size: .2287rem;

                }

                span {
                    font-size: 0.15rem;
                }
            }

            &::after {
                position: absolute;
                left: 0;
                top: 0;
                content: '';
                width: 6.6792rem;
                height: .575rem;
                background: url(../images/person_time_bg2.png);
                background-size: 100% 100%;
            }
        }


    }

    .serveNum {
        display: flex;

        // 两个柱子
        >ul {
            display: flex;

            li {
                width: 1.1018rem;
                height: 1.8197rem;
                background: url(../images/service_time1_bg.png);
                background-size: 100% 100%;
                margin: 0.8rem 0 0 0.4rem;

                img {
                    width: 1.1018rem;
                    height: 1.8197rem;
                }
            }

            li:nth-child(2) {
                width: 1.1018rem;
                height: 1.8197rem;
                background: url(../images/service_time2_bg.png);
                background-size: 100% 100%;
                margin: 0.8rem 0 0 0.3rem;

                img {
                    width: 1.1018rem;
                    height: 1.8197rem;
                }
            }
        }

        // 本年本月服务人次
        .serveNumRight {
            margin: 0.3rem 0 0 1rem;

            >div {
                >p {
                    margin: 0.2rem 0;
                    font-size: .2287rem;
                    color: #fff;
                }

                >ul {
                    display: flex;
                    color: #29FB5C;
                    font-size: .3467rem;

                    li {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: .3505rem;
                        height: .4045rem;
                        margin-right: 0.15rem;
                        background: url(../images/service_time_bg1.png);
                        background-size: 100% 100%;
                    }
                }
            }

            >div:nth-child(2) {
                >ul {
                    color: #F2C849;

                    li {
                        background: url(../images/service_time_bg2.png);
                        background-size: 100% 100%;
                    }
                }
            }
        }
    }

}

// 借阅趋势

.borrowingTrend {
    padding-left: 0.4rem;
    height: 8.5292rem !important;

    h4 {
        color: #fff;
        font-size: .3833rem;
        line-height: 0.8rem;
    }

    .borrowingNum {
        padding: 0 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.75rem;
        width: 14.2rem;
        height: 1.4937rem;
        color: #fff;
        background: url('../images/borrow_trend_top_bg.png');
        background-size: 100% 100%;

        >li {
            display: flex;
            flex-direction: column;

            >span:first-child {
                font-size: .2rem;
                margin-bottom: 0.1rem;
            }

            >span:last-child {
                font-size: .3833rem;

                span {
                    font-size: 0.2rem;
                }
            }
        }

        >li:nth-child(3) {
            width: 1rem;
            height: 1rem;
            background: url(../images/borrow_trend_book.png);
            background-size: 100% 100%;

        }
    }

    // 借阅趋势柱状图
    .borrowingBar {
        margin: 0.2rem 0;
        width: 14.2rem;
        height: 2.8333rem;

    }

    .dingwei {
        position: relative;
    }

    .ulqingkkuang {
        position: absolute;
        top: 0;
        left: 5rem;
        color: #fff;
        font-size: 0.2rem;
        display: flex;

        li:nth-child(1) {
            i {
                display: inline-block;
                width: 0.35rem;
                height: 0.15rem;
                background-color: #02d7b1;
            }
        }

        li:nth-child(2) {
            margin-left: 2rem;

            i {
                display: inline-block;
                width: 0.35rem;
                height: 0.15rem;
                background-color: #f4c311;
            }
        }
    }

    // 借出还入情况
    .loanAndReturn {
        display: flex;

        .LendTheSituation {
            width: 47.5%;
            margin-right: 0.3rem;

            >span {
                padding-bottom: 0.1rem;
                border-bottom: 1px solid #02c3a0;
                display: flex;
                align-items: center;

                >span {
                    color: #fff;
                    font-size: 0.2rem;
                }

                >i {
                    display: inline-block;
                    width: 0.45rem;
                    height: 0.32rem;
                    background: url(../images/borrow_trend_bottom_tip1.png);
                    background-size: 100% 100%;
                    margin-right: 0.15rem;
                }
            }

            >ul {
                padding: 0.1rem 0.2rem 0.1rem 0.1rem;
                margin-top: 0.1rem;
                background-color: #055537;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                li {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 0.3rem;

                    >span:first-child {
                        font-size: 0.18rem;
                        color: #fff;
                    }

                    >span:last-child {
                        display: flex;
                        align-items: center;

                        >span {
                            font-size: 0.20rem;
                            color: #02d7b1;
                        }

                        i {
                            font-size: 0.1rem;
                            color: #02d7b1;
                        }
                    }
                }
            }
        }

        .AlsoIntoSituation {
            width: 47.5%;
            margin-right: 0.3rem;

            >span {
                padding-bottom: 0.1rem;
                border-bottom: 1px solid #02c3a0;
                display: flex;
                align-items: center;

                >span {
                    color: #fff;
                    font-size: 0.2rem;
                }

                >i {
                    display: inline-block;
                    width: 0.45rem;
                    height: 0.32rem;
                    background: url(../images/borrow_trend_bottom_tip2.png);
                    background-size: 100% 100%;
                    margin-right: 0.15rem;
                }
            }

            >ul {
                padding: 0.1rem 0.2rem 0.1rem 0.1rem;
                margin-top: 0.1rem;
                background-color: #4d6e40;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                li {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 0.3rem;

                    >span:first-child {
                        font-size: 0.18rem;
                        color: #fff;
                    }

                    >span:last-child {
                        display: flex;
                        align-items: center;

                        >span {
                            font-size: 0.20rem;
                            color: #fdd55d;
                        }

                        i {
                            font-size: 0.1rem;
                            color: #fdd55d;
                        }
                    }
                }
            }
        }
    }


}

// 实时借阅 年度统计 本馆风采
.realTimeBorrowing {
    display: flex;

    // 实时借阅
    .realTimeBorrowingBox {
        width: 7.8458rem;
        height: 8.5333rem;
        background: url(../images/current_borrow_bg.png);
        background-size: 100% 100%;

        h4 {
            color: #fff;
            font-size: .3833rem;
            line-height: 0.7rem;
            margin-left: 0.4rem;
        }

        .bookList {
            display: flex;
            justify-content: space-between;
            width: 7.3rem;
            height: 2.3042rem;
            margin: 0.4rem 0.2729rem;

            img {
                width: 1.3302rem;
                height: 2.3021rem;
            }
        }

        .bookTime {
            display: flex;
            position: absolute;

            .bookTimeLine {
                position: relative;
                top: 0.6rem;
                left: 0.5rem;
                width: .0083rem;
                height: 3.5rem;
                background-color: #29fb5c;
            }

            ul {
                margin-left: .88125rem;

                li {
                    display: flex;
                    align-items: center;
                    position: relative;
                    padding-left: 0.2rem;

                    width: 6.2833rem;
                    height: .6417rem;
                    background-color: #024f2c;
                    margin: 0.2rem 0 0.2rem 0;

                    >span {
                        font-size: .195rem;
                        color: #02D7B1;
                        margin-right: 0.2rem;
                    }

                    >i {
                        font-size: .195rem;
                        color: #fff;
                    }

                    &::before {
                        position: absolute;
                        top: 0.3rem;
                        left: -0.43rem;
                        content: '';
                        width: .1083rem;
                        height: .1083rem;
                        border-radius: 50%;
                        background-color: #29fb5c;
                        font-size: 0.15rem;
                    }
                }

            }

        }
    }

    .museum {
        margin-left: 0.1rem;

        // 年度统计
        .annualStatistics {
            width: 7.8458rem;
            height: 4.0583rem;
            background: url(../images/annual_bg.png);
            background-size: 100% 100%;

            h4 {
                color: #fff;
                font-size: .3833rem;
                line-height: 0.7rem;
                margin-left: 0.4rem;
            }

            .annualStatisticsBox {
                height: 100%;
                display: flex;
                // align-items: center;

                padding-left: 1rem;
                padding-right: 0.5rem;

                .iconfontDong {
                    width: 2.1758rem;
                    height: 1.6204rem;
                    margin-top: 0.8rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                >ul {
                    margin: 0.5rem 0 0 0.5rem;
                    font-size: .2287rem;
                    color: #fff;

                    li {
                        >h4 {
                            font-weight: normal;
                        }
                    }

                    li:nth-child(1) {
                        >h4 {
                            color: #29CBAA;
                            margin-left: 0;
                        }

                        >span {
                            display: inline-block;
                            width: 3.4625rem;
                            height: .25rem;
                            background: url(../images/annual_number1_bg.png);
                            background-size: 100% 100%;

                            >i {
                                display: inline-block;
                                width: 2.4583rem;
                                height: .25rem;
                                background: url(../images/annual_number1.png);
                                background-size: 100% 100%;
                            }
                        }
                    }

                    li:nth-child(2) {
                        >h4 {
                            color: #FDD55D;
                            margin-left: 0;
                        }

                        >span {
                            display: inline-block;
                            width: 3.4625rem;
                            height: .25rem;
                            background: url(../images/annual_number2_bg.png);
                            background-size: 100% 100%;

                            >i {
                                display: inline-block;
                                width: 2.4583rem;
                                height: .25rem;
                                background: url(../images/annual_number2.png);
                                background-size: 100% 100%;
                            }
                        }
                    }
                }
            }


        }

        // 本馆风采
        .styleMuseum {
            width: 7.8458rem;
            height: 3.9917rem;
            background: url(../images/library_show_bg.png);
            background-size: 100% 100%;
            margin-top: 0.4833rem;

            h4 {
                color: #fff;
                font-size: .3833rem;
                line-height: 0.7rem;
                margin-left: 0.4rem;
            }

            .styleMuseumPhoto {
                display: flex;
                justify-content: center;
                margin-top: .3rem;

                img {
                    width: 5.0083rem;
                    height: 2.6167rem;
                }
            }
        }
    }
}

// 五大类馆藏占比 流通占比
.museumPie {
    display: flex;

    // 五大类馆藏占比
    .CollectionProportion {
        width: 7.3875rem;
        height: 8.5292rem;
        background: url(../images/circulate_bg.png);
        background-size: 100% 100%;

        h4 {
            color: #fff;
            font-size: .3833rem;
            line-height: 0.7rem;
            margin-left: 0.4rem;
        }

        .CollectionProportionBox {
            position: relative;
            margin: 0.8rem 0 0 0.9rem;
            width: 5.8rem;
            height: 5.4rem;
            background: url(../images/collection_content_bg.png);
            background-size: 100% 100%;

            .imgBg {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 2.2718rem;
                height: 2.2718rem;
                background: url(../images/collection_content_center_bg.png);
                background-size: 100% 100%;
                font-size: .3rem;
                color: #fff;
                font-weight: 700;
            }

            .originBox {
                position: absolute;
                top: .0667rem;
                left: -0.0333rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 1.9838rem;
                height: 1.9838rem;
                background: url(../images/collection_item1_bg.png);
                background-size: 100% 100%;
                font-size: .2rem;
                color: #fff;
            }

            .purpleBox {
                position: absolute;
                top: 0;
                left: 2.5583rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 1.7208rem;
                height: 1.7208rem;
                background: url(../images/collection_item2_bg.png);
                background-size: 100% 100%;
                font-size: .2rem;
                color: #fff;
            }

            .yellowBox {
                position: absolute;
                top: 0.5rem;
                left: 4.5583rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 1.8437rem;
                height: 1.8437rem;
                background: url(../images/collection_item3_bg.png);
                background-size: 100% 100%;
                font-size: .2rem;
                color: #fff;
            }

            .blueBox {
                position: absolute;
                top: 3.5rem;
                left: 1rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 1.5934rem;
                height: 1.5934rem;
                background: url(../images/collection_item4_bg.png);
                background-size: 100% 100%;
                font-size: .2rem;
                color: #fff;
            }

            .greenBox {
                position: absolute;
                top: 4.5rem;
                left: 3.5rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 1.8437rem;
                height: 1.8437rem;
                background: url(../images/collection_item5_bg.png);
                background-size: 100% 100%;
                font-size: .2rem;
                color: #fff;
            }

        }
    }

    // 流通占比
    .CirculationProportion {
        margin-left: 0.35rem;
        width: 7.3875rem;
        height: 8.5292rem;
        background: url(../images/circulate_bg.png);
        background-size: 100% 100%;

        h4 {
            color: #fff;
            font-size: .3833rem;
            line-height: 0.7rem;
            margin-left: 0.4rem;
        }

        .CirculationProportionBox {
            position: relative;

            .degbg1 {
                position: absolute;
                left: 1.2667rem;
                bottom: 1.2917rem;
                width: 4.8167rem;
                height: 4.8167rem;
                background: url(../images/circulate_circle1.png);
                background-size: 100% 100%;
                animation: xuanzhuan 5s linear infinite;

            }

            .degbg2 {
                position: absolute;
                left: 1.5667rem;
                bottom: 1.5917rem;
                width: 4.2167rem;
                height: 4.2167rem;
                background: url(../images/circulate_circle2.png);
                background-size: 100% 100%;
                animation: xuanzhuan1 5s linear infinite;

            }

            @keyframes xuanzhuan {
                0% {
                    transform: rotate(0);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            @keyframes xuanzhuan1 {
                0% {
                    transform: rotate(0);
                }

                100% {
                    transform: rotate(-360deg);
                }
            }

            .CirculationProportionBoxBie {
                // margin: 0.5rem 0 0 0.5rem;
                // width: 6.4167rem;
                width: 100%;
                height: 7.4167rem;
            }
        }
    }


}

// 热门推荐
.spinningPerspective {
    position: relative;
    margin-bottom: 0.5rem;
    width: 15.8083rem;
    height: 7.3208rem;
    background-color: pink;
    background: url(../images/hot_recommend_bg1.png);
    background-size: 100% 100%;

    .spinningPerspectiveTitle {
        position: absolute;
        left: 50%;
        top: 0.5rem;
        transform: translateX(-50%);
        font-size: 0.35rem;
        line-height: .8667rem;
        font-weight: 700;
        text-align: center;
        color: #fff;
        width: 4.817rem;
        height: .8667rem;
        background: url(../images/hot_recommend_title_bg.png);
        background-size: 100% 100%;
    }

    &::after {
        position: absolute;
        top: 0;
        left: 0.3rem;
        content: '';
        width: 15.2rem;
        height: 3.3208rem;
        background: url(../images/hot_recommend_bg11.png);
        background-size: 100% 100%;
        opacity: 0.5;
    }

    &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 15.4917rem;
        height: 2.1593rem;
        background: url(../images/hot_recommend_bg2.png);
        background-size: 100% 100%;

    }

    ul> {
        z-index: 9999;
        display: flex;
        color: #fff;
        justify-content: space-around;
        margin-top: 2.1rem;
        padding-right: 0.4rem;

        >li {
            display: flex;
            flex-direction: column;
            align-items: center;

            h4 {
                font-style: normal;
                font-size: 0.3rem;
                font-weight: 700;
            }

            i {
                margin: 0.3rem 0;
                font-size: 0.2rem;
                color: #fdd55d;
            }

            img {
                width: 1.6437rem;
                height: 2rem;
                z-index: 999;
            }

            span {
                font-size: 0.3rem;
                color: #29fb5c;
                z-index: 9999;
                // margin-top: 0.8rem;
            }

        }

        li:nth-child(1) {
            span {
                color: #ff4242;
                margin-top: 1rem;
            }
        }

        li:nth-child(2) {
            margin-top: 0.2rem;

            span {
                color: #ffde33;
                margin-top: 0.8rem;
            }
        }

        li:nth-child(3) {
            margin-top: 0.4rem;

            span {
                color: #ffde33;
                margin-top: 0.75rem;
            }
        }

        li:nth-child(4) {
            margin-top: 0.6rem;

            span {
                margin-top: 0.6rem;
            }
        }

        li:nth-child(5) {
            margin-top: 1rem;

            span {
                margin-top: 0.3rem;
            }
        }

        li:nth-child(6) {
            margin-top: 1.2rem;

            span {
                margin-top: 0.2rem;
            }
        }

        li:nth-child(7) {
            margin-top: 1.4rem;

            span {
                margin-top: 0.15rem;
            }
        }
    }
}